<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陀螺仪</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .box, .content {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #dddddd;
            perspective: 1500px;
            -webkit-perspective: 1500px;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            overflow: hidden;
            transition: all .1s ease;
        }
        .content {
            background: url(p0.jpg) no-repeat center/cover;
            transform: rotateY(0deg) rotateZ(0deg);
            -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform-origin: 50% 50%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="content"></div>
</div>
<script>
    window.addEventListener('deviceorientation', function (e) {
        document.querySelector('.content').style.transform = 'rotateX(' + e.beta*0.4 + 'deg) rotateY(' + e.gamma*0.4 + 'deg) scale(1.16)';
    });
</script>
</body>
</html>